<template>
    <h2 style="text-align: center;">理财项目列表</h2>
    理财编号:<input type="text" v-model="LoadInfo.Fid"/>
    理财名称:<input type="text" v-model="LoadInfo.Fname"/>
    理财收益:<input type="text" v-model="LoadInfo.MinFAPY"/> - <input type="text" v-model="LoadInfo.MaxFAPY"/>
    <input type="button" value="查询" @click="LoadData"/>
    <table class="table table-bordered">
     <thead>
         <tr>
            <td>理财编号</td>
            <td>理财名称</td>
            <td>年收益</td>
            <td>月收益</td>
            <td>最低金额</td>
            <td>理财人数</td>
            <td>风险等级</td>  
            <td>操作</td>
        </tr>
     </thead>
        <tbody>
         <tr v-for="item in info">
            <td>{{item.F_id}}</td>
            <td>{{item.F_name}}</td>
            <td>{{item.F_APY}}</td>
            <td>{{(item.F_APY/12).toFixed(2)}}%</td>
            <td>{{item.F_MinMoney.toFixed(2)}}CNY</td>
            <td>{{item.F_Number}}</td>
            <td>{{item.F_Level==0?"低风险":item.F_Level==1?"中风险":"高风险"}}</td>
            <td><a href="#" @click="JumpUserFinanInfo(Number(item.F_id))">用户理财明细</a></td>
        </tr>
        </tbody>
    </table>
    <span>当前数据共{{recordCount}}条,每页显示{{LoadInfo.PageSize}}条,当前{{ LoadInfo.PageIndex }}/{{PageCount}}页</span>
    &nbsp;<a @click="LoadPage('F')">首页</a>
    &nbsp;<a @click="LoadPage('P')">上一页</a>
    &nbsp;<a v-for="item in PageCount" @click="LoadPageNum(item)">{{item}}&nbsp;</a>
    &nbsp;<a @click="LoadPage('N')">下一页</a>
    &nbsp;<a @click="LoadPage('L')">尾页</a>
    &nbsp;<input type="text" v-model="JumpPage" style="width: 50px; height: 30px;"/> <input type="button" value="Go" @click="JumpPageGo"/>
    &nbsp;
    <select v-model="Csize" @change="ChangeSize">
         <option value="2">每页显示2条</option>
         <option value="3">每页显示3条</option>
         <option value="4">每页显示4条</option>
    </select>

</template>


<script setup lang="ts">
import {ref,onMounted} from 'vue';

import axios from 'axios';


import {useRouter} from 'vue-router';

//获取当前路由的实例
const router = useRouter();

//创建响应式数据
const info = ref([{
F_id:0,
F_name:"",
F_APY:0,
F_MinMoney:0,
F_Number:0,
F_Level:0
}])

//创建生命周期函数勾
onMounted(()=>{
LoadData();
})

//创建查询条件响应式数据
const LoadInfo = ref({
Fid:"",
Fname:"",
MinFAPY:"",
MaxFAPY:"",
PageSize:2,
PageIndex:1
})

//创建总条数,总页数响应式数据
const PageCount = ref(0);
const recordCount = ref(0);

const LoadData =()=>{
axios({
 url:"https://localhost:44337/api/Finans/ShowFinanInfo",
 method:"get",
 params:LoadInfo.value
}).then((res)=>{
 console.log(res.data);
 info.value = res.data.list;
 PageCount.value=res.data.PageCount
 recordCount.value=res.data.recordCount;
})
.catch((err)=>{
 console.log(err);
})
}

//完成基本分页
const LoadPage =(Msg:string) =>{
switch(Msg){
 case "F":
     LoadInfo.value.PageIndex=1;
     break;
 case "P":
     if(LoadInfo.value.PageIndex>1)
     {
         LoadInfo.value.PageIndex--;
     }
     else
     {
         alert('已经是第一页了')
     }
     break;
 case "N":
     if(LoadInfo.value.PageIndex<PageCount.value)
     {
         LoadInfo.value.PageIndex++;
     }
     else
     {
         alert('已经是最后一页了')
     }
     break;
 case "L":
     LoadInfo.value.PageIndex=PageCount.value;
     break;
default:
     break;
}
LoadData();
}

//完成页码的点击事件加载
const LoadPageNum =(PageNum:number) =>{
LoadInfo.value.PageIndex =PageNum;
LoadData();
}

//创建跳转页的响应式数据
const JumpPage =ref("")

//完成跳转页
const JumpPageGo = ()=>{
if(JumpPage.value =="")
{
 alert('请输入页码')
 return;
}
if(isNaN(Number(JumpPage.value)))
{
  alert('请输入数字页码')
  JumpPage.value="";
  return;
}
if(Number(JumpPage.value)<=0)
{
 alert('跳转页码不能小于1')
 JumpPage.value="";
 return;
}
if(Number(JumpPage.value)>PageCount.value)
{
 alert('跳转页码不能超过最大页码')
 JumpPage.value="";
 return;
}
LoadInfo.value.PageIndex = parseInt(JumpPage.value);
LoadData();
}

//创建每页显示条数的响应式数据
const Csize =ref(2);

//每页显示条数
const ChangeSize =()=>{
LoadInfo.value.PageSize = Csize.value;
LoadData();
}


//跳转到购买页面
const JumpUserFinanInfo = (Fid:number) =>{
     router.push({
         name:"AllUserFinanInfoPage",
         params:{
             Fid:Fid
         }
     })
}
</script>